
{include file='index/header' /}

{if $userInfo.isSiteUser}
    <!-- 新增悬浮固定发布按钮 -->
    <!-- <div id="floating_publish_button" style="position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 999;">
        <button class="button layui-btn layui-btn-danger" style="background-color: orange; color: white; border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 14px; display: flex; align-items: center; justify-content: center;" onclick="openCommentFormModal()">+</button>
    </div> -->
    <!-- 新增一个容器用于包裹评论表单，并默认隐藏 -->
    <div id="comment_form_container" >
        <div method="post" class="comment_form" action="" id="comment_form">
            <!-- <small></small> -->
            <div id="msgInput" class="text" maxlength="2800" onkeyup="check_len1()">
                <!-- <p>你在做什么呢</p> -->
            </div>
            <input type="hidden" id="topicTitle" value="{$topicTitle | default=''}">
            <div class="postnow" >
                <!-- <span>
                    <input type="button" value="发布" class="button layui-btn layui-btn" id="sendButton" />
                </span> -->
                <span style="margin-left: 3%;">你还可以发布<em id="leftlen1">2800</em>字</span>
            </div>

            <!-- 表情等 -->
            <div id="msgToolBar" class="toolbar"></div>
            <div class="tool-up-class" style="display: none;">
                <div class="imgHtml" style="display: block;border-radius: 3px;">
                    <!-- <img src="" width="70px" alt=""> -->
                    上传成功！
                    <i class="layui-icon layui-icon-close-fill" onclick="removeImg(this)"
                        style="color: red;cursor:pointer;font-size:20px!important"></i>
                </div>
                <input type="hidden" id="mediaVal">
            </div>
            <br />

            <p style="width: 20%;margin-left: 79%;margin-top: -15px;"><input style="border-radius: 8px;" type="submit" id="sendButton" value="发布" class="form_submit" /></p>
        </div>
    </div>
    <script>
        // 引入 layer 插件（如果未引入，需要先引入）
        // layui.use('layer', function(){
        //     var layer = layui.layer;
        // });

        // 打开评论表单弹框的函数
        function openCommentFormModal() {
            layer.open({
                type: 1,
                title: '评论表单',
                content: $('#comment_form_container'),
                area: ['100%','400px'],
                shadeClose: true
            });
        }
    </script>
{/if}
<input type="hidden" id="userInfo" value="{$userInfo|json_encode}" />
<div id="msgContent">
	<!-- <div class="post">
		<img class="post-head" src="" />
		<div class="post-article">
			<div class="post-info-i">
				<h2><a title="张三" href="">张三</a></h2>
				<small><i class="fa fa-clock-o"></i>2023-11-11
				<i class="fa fa-eye"></i>
				<a href=""><i class="fa fa-pencil-square-o"></i>编辑</a></small>
			</div>
			<div class="post-content">
			<p class="more"><a href="" title="asdfasfasf">继续阅读</a></p>
			</div>
		</div>
		<div class="clear"></div>
		<div class="post-meta">
				<span><i class="fa fa-user"></i><a href="asdfasfdasd">张三</a></span>
				<span><i class="fa fa-inbox"></i>safasdfas</span>
				<span><i class="fa fa-comment"></i>('1111 条')</span>
				<div class="clear"></div>
		</div>
	</div>	 -->
</div>


<div  id="showMore" class="sidebar-mb-show">
	<div class="box sidebar-readmore">
		<div class="box-body"><stonrg>加载中...</stonrg></div>
	</div>
</div>
<!-- 回到顶部 -->
<!-- <section class="back-to-top">
	回到顶部
</section> -->
<!-- <div class="post">
	<img class="post-head" src="" />
	<div class="post-article">
		<div class="post-info-i">
			<h2><a href="#">404 啥也没找到</a></h2>
		</div>
		<div class="post-content">
			<p>什么都没有找到啊。。抱歉啦！</p>
			404页面是客户端在浏览网页时，服务器无法正常提供信息，或是服务器无法回应，且不知道原因所返回的页面。据说在第三次科技革命之前，互联网的形态就是一个大型的中央数据库，这个数据库就设置在404房间里面。那时候所有的请求都是由人工手动完成的，如果在数据库中没有找到请求者所需要的文件，或者由于请求者写错了文件编号，用户就会得到一个返回信息：room 404 : file not found。404错误信息通常是在目标页面被更改或移除，或客户端输入页面地址错误后显示的页面，人们也就习惯了用404作为服务器未找到文件的错误代码了。当然实际考证传说中的room 404是不存在的，在http请求3位的返回码中，4开头的代表客户错误，5开头代表服务器端错误。
		</div>
	</div>
	<div class="clear"></div>
	<div class="post-meta">
			<span><i class="fa fa-user"></i> <a href="#">System</a></span>
			<span><i class="fa fa-inbox"></i> 404,not,found</span>
	    	<span><i class="fa fa-comment"></i> Zero</span>
	    	<div class="clear"></div>
	</div>
</div> -->

{include file='index/foot' /}

<script>
	/**
	* 缓冲函数
	* @param {Number} position 当前滚动位置
	* @param {Number} destination 目标位置
	* @param {Number} rate 缓动率
	* @param {Function} callback 缓动结束回调函数 两个参数分别是当前位置和是否结束
	*/
	var easeout = function (position, destination, rate, callback) {
		if (position === destination || typeof destination !== 'number') {
			return false;
		}
		destination = destination || 0;
		rate = rate || 2;

		// 不存在原生`requestAnimationFrame`，用`setTimeout`模拟替代
		if (!window.requestAnimationFrame) {
			window.requestAnimationFrame = function (fn) {
				return setTimeout(fn, 17);
			}
		}

		var step = function () {
			position = position + (destination - position) / rate;
			if (Math.abs(destination - position) < 1) {
				callback(destination, true);
				return;
			}
			callback(position, false);
			requestAnimationFrame(step);
		};
		step();
	}

	var scrollTopSmooth = function (position) {
		// 当前滚动高度
		var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		easeout(scrollTop, position, 5, function (val) {
			window.scrollTo(0, val);
		});
	}

</script>
<script>
	var page = 0;
	$(function () {
		var canLoad = true
		function initNextPage(url) {
			if (!canLoad) return
			page++
			canLoad = false
			var url = window.location.pathname
			$.ajax({
				type: "get",
				url: url,
				data: { page: page },
				dataType: "json",
			})
				.done(function (json) {
					var data = json.data.data
					
					if (json?.code === 0) {
					    // 显示提示信息
					    alertMsg(json?.msg || '加载数据失败');
					    // 2 秒后将 canLoad 设置为 true
					    setTimeout(() => {
					        canLoad = true;
					    }, 2000);
					    return;
					}	

					for (var i = 0; i < data.length; i++) {
						var mediaStr = '';
						var str = '';
						var delStr = '';
						var c1 = '';
						var c2 = '';
						if (data[i].media) {
							data[i].media_info = $.parseJSON(data[i].media_info)
							if (data[i].media_info.media_type == 'mp4' || data[i].media_info.media_type == 'm3u8') {
								mediaStr = '<p class="massageImg clear showVideo' + data[i].msg_id + '" vid="' + data[i].media + '"><video width="400px"  controls=""  name="media"><source src="" type="video/mp4"></video></p>';
							} else if (data[i].media_info.media_type == 'mp3') {
									mediaStr = '<p class="massageImg clear"><audio id="music_'+data[i].msg_id+'" class="music" controls="controls" loop="loop" onplay="stopOther(this)" preload="none" controlsList="nodownload" οncοntextmenu="return false" name="media"><source src="'+data[i].media+'" type="audio/mpeg"></audio></p>';
								}  else {
								mediaStr = '<p  class="massageImg clear"><img class="massageImgCommon massageImg_'+data[i].media_info.media_type+'"  onclick="showMessageImg(this)" src="' + data[i].media + '"></p>';
							}
						}
						// if (0 != data[i].repostsum) {
						// 	c1 = '('+data[i].repostsum+')'
						// }
						if (0 != data[i].commentsum) {
							c2 = '(' + data[i].commentsum + ')'
						}
						// 添加样式类以实现右侧对齐和样式美化
						delStr += '<div class="post-meta-icons" style="text-align: right;">'; 
						delStr += '<span><a href="/' + data[i].blog + '/message/' + data[i].msg_id + '"><i class="layui-icon layui-icon-eye"></i> 查看</a></span>';
						delStr += '<span><a href="javascript:;" data-title="评论" data-url="/chat/messageChatId/' + data[i].msg_id + '" onclick="showFrameHtml(this, \'100%\', \'100%\')"><i class="layui-icon layui-icon-reply-fill"></i> 评论' + c2 + '</a></span>';
						if (json.data.allow_delete) {
							delStr += '<span><a href="/' + data[i].blog + '/del/message/' + data[i].msg_id + '"><i class="layui-icon layui-icon-delete"></i> 删除</a></span>';
						} else if(json.data.is_collect) {
							delStr += '<span><a href="javascript:void(0);" onclick="collectMsg(' + data[i].msg_id + ',1);"><i class="layui-icon layui-icon-star-fill"></i> 取消收藏</a></span>';
						} else {
							delStr += '<span><a href="javascript:void(0);" onclick="collectMsg(' + data[i].msg_id + ',0);"><i class="layui-icon layui-icon-star"></i> 收藏</a></span>';
						}
						delStr += '</div>'; // 关闭样式类
						str = '<div class="post"><img class="post-head" src="' + data[i].head_image + '" />'
							+ '<div class="post-article">'
							+ '<div class="post-info-i">'
							+ '<h2><a href="/' + data[i].blog + '/own/">' + data[i].nickname + '</a></h2><small><i class="fa fa-clock-o"></i>'+getDateDiff(data[i].ctime)+'<i class="fa fa-eye"></i>'+' 来自' + data[i].refrom+'</small>'
							+ '</div>'
							+ '<div class="post-content"><div class="post-text">' + data[i].contents + data[i].repost + '</div>'  + mediaStr + '</div>'
							+ '</div>'
							+ '<div class="clear"></div>'
							+ '<div class="post-meta">'+delStr+'</div>'
							+ '<div class="clear"></div>'
							+ '</div>'
							+ '</div>';

						$("#msgContent").append(str);
						iniVideo(data[i].msg_id)
					}

					if (data.length < 8) {
						$("#showMore").hide()
						return
						// $("#showMore").html('没有了')
					}

					canLoad = true
				})
				.always(function () {
				})
				.fail(function () {
				});
		}
		$(window).scroll(function () {
			var top = $(window).scrollTop();
			var winH = $(window).height();
			var docH = $(document).height();
			if (docH <= (top + winH + 200)) {
				initNextPage(page)
			}
		});
		initNextPage(page)
	})

</script>